<template>


<div>

  <el-form-item label="城市地区" prop="address">
    省<el-select></el-select>
    市<el-select></el-select>
    区<el-select></el-select>
  </el-form-item>

  <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
    <el-form-item label="" prop="acreage">
      <el-input
        v-model="queryParams.acreage"
        placeholder="搜索:小区名 功域名，小区名，租房号"
        clearable
        size="small"
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
    </el-form-item>
  </el-form>
  <el-main>
    <el-table
      :data="tableData"
      style="width: 100%">
<!--      <el-table-column
        prop="id"
        label="Id"
        width="180">
      </el-table-column>-->

      <el-table-column
        prop="houseId"
        label="房源ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="acreage"
        label="房源名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="proportion"
        label="面积"
        width="180">
      </el-table-column>
      <el-table-column
        prop="rental"
        label="租金"
        width="180">
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="listFangYuanpic"
    />
  </el-main>
</div>
</template>

<script>
import {listFangYuanpic} from "@/api/fangyuan/fangyuan";

export default {
  data(){
    return{
      current:1,
      tableData:[],

      queryParams:{
        acreage:undefined,
        pageNum: 1,
        pageSize: 10,
        total:0,
      },
      showSearch:true
    }
  },created() {
    this.listFangYuanpic()
  },methods:{
    listFangYuanpic() {
      listFangYuanpic(this.queryParams).then(response => {
          console.log(response)
          this.tableData = response.rows;
          this.total = response.total;
        }
      );
    },handleQuery() {
      this.queryParams.pageNum = 1;
      this.listFangYuanpic();
    },
  },

}
</script>

<style scoped>

</style>
